<template>
	<view>
		<view class="demo">
			<view class="cube">
				<view class="cube-face is-front"><image class="cube-img" src="/static/other/1.png" /></view>
				<view class="cube-face is-back"><image class="cube-img" src="/static/other/2.png" /></view>
				<view class="cube-face is-right"><image class="cube-img" src="/static/other/9.png" /></view>
				<view class="cube-face is-left"><image class="cube-img" src="/static/other/8.png" /></view>
				<view class="cube-face is-top"><image class="cube-img" src="/static/other/6.png" /></view>
				<view class="cube-face is-bottom"><image class="cube-img" src="/static/other/4.png" /></view>
			</view>
		</view>
		<soure url="url"></soure>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://juejin.cn/post/6920998412506628109'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.demo {
		width: 300px;
		height: 300px;
		perspective: 1000px;
		position: relative;
		margin: 30px auto;
	}

	.cube {
		width: 100%;
		height: 100%;
		position: absolute;
		transform-style: preserve-3d;
		animation: rotating ease 18s infinite alternate;
	}

	.cube .cube-face {
		border: 2px solid #000;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
		opacity: 0.5;
		/* backface-visibility: hidden; */
	}

	.cube-face.is-front {
		transform: translateZ(150px);
	}

	.cube-face.is-back {
		transform: rotateX(-180deg) translateZ(150px);
	}

	.cube-face.is-right {
		transform: rotateY(90deg) translateZ(150px);
	}

	.cube-face.is-left {
		transform: rotateY(-90deg) translateZ(150px);
	}

	.cube-face.is-top {
		transform: rotateX(90deg) translateZ(150px);
	}

	.cube-face.is-bottom {
		transform: rotateX(-90deg) translateZ(150px);
	}

	.cube-img {
		height: 50%;
		width: 50%;
	}

	@keyframes rotating {

		/* show-front */
		0%,
		100% {
			transform: translateZ(-150px);
		}

		/* show-back */
		16.5% {
			transform: translateZ(-150px) rotateX(-180deg);
		}

		/* show-left */
		33% {
			transform: translateZ(-150px) rotateY(90deg);
		}

		/* show-right */
		49.5% {
			transform: translateZ(-150px) rotateY(-90deg);
		}

		/* show-top */
		66% {
			transform: translateZ(-150px) rotateX(-90deg);
		}

		/* show-bottom */
		82.5% {
			transform: translateZ(-150px) rotateX(90deg);
		}
	}
</style>
